<template>
  <div>
    <!-- 抬头 -->
    <div class="firstCard">
      <!-- 导航栏 -->
      <!-- <div style="float:right;width:80%">
        <ul>
          <li style="text-align:center;width:20%;height:30px;float:left">
            <a href="#">
              <span class="drop" id="down">
                <span>Download</span>
                <span>
                  <i v-if="onIcon1" class="el-icon-arrow-down" id="icon"></i>
                </span>
                <span>
                  <i v-if="onIcon2" class="el-icon-arrow-up" id="icon"></i>
                </span>
              </span>
            </a>
          </li>
          <li style="text-align:center;width:20%;float:left">
            <a href="#">
              <span class="drop" id="serv">
                <span>Service</span>
                <span>
                  <i v-if="onIcon1" class="el-icon-arrow-down" id="icon"></i>
                </span>
                <span>
                  <i v-if="onIcon2" class="el-icon-arrow-up" id="icon"></i>
                </span>
              </span>
            </a>
          </li>
          <li style="text-align:center;width:20%;float:left">
            <a href="#">
              <span class="drop" id="sup">
                <span>Support</span>
                <span>
                  <i v-if="onIcon1" class="el-icon-arrow-down" id="icon"></i>
                </span>
                <span>
                  <i v-if="onIcon2" class="el-icon-arrow-up" id="icon"></i>
                </span>
              </span>
            </a>
          </li>
          <li style="text-align:center;width:20%;float:left">
            <a href="#">
              <span class="drop" id="pri">
                <span>Pricing</span>
                <span>
                  <i v-if="onIcon1" class="el-icon-arrow-down" id="icon"></i>
                </span>
                <span>
                  <i v-if="onIcon2" class="el-icon-arrow-up" id="icon"></i>
                </span>
              </span>
            </a>
          </li>
        </ul>
        <div style="clear:both;"></div>
        <div style="float:left">
          <div class="dropDown" id="Download">
            <ul>
              <li style="liStyle">Manual</li>
              <li>GeneAs-GBS</li>
            </ul>
          </div>
        </div>
        <div style="margin-left:15%">
          <div class="dropDown" id="Service">11111</div>
        </div>
        <div style="margin-left:35%">
          <div class="dropDown" id="Support">11111</div>
        </div>
        <div style="margin-left:50%">
          <div class="dropDown" id="Pricing">11111</div>
        </div>
      </div>-->
      <!-- <div>
        <span style="color:white;">  111</span>
        <el-dropdown-menu>
          <span class="el-dropdown-link">
            下拉菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item >双皮奶</el-dropdown-item>
            <el-dropdown-item >蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown-menu>
      </div>-->
      <el-button :plain="true" @click="open">打开消息提示</el-button>
      <el-button>默认按钮</el-button>
    </div>
  </div>
</template>

<script>
import $ from "jquery"; //其实嘛你安装依赖后你在node_modlules文件中的一个文件相对路径而已
console.log($); //你可以打印瞧瞧
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeIndex: "1",
      onIcon1: true,
      onIcon2: false
    };
  },
  mounted() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    open() {
      this.$message("这是一条消息提示");
    },
    openVn() {
      const h = this.$createElement;
      this.$message({
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "VNode")
        ])
      });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.firstCard {
  width: 100%;
  height: 600px;
  background-color: #242637;
  text-align: center;
  padding-top: 10px;
}
a {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  text-decoration: none;
  background-color: transparent;
  color: #fff;
}
a:hover {
  color: #999;
}
li {
  list-style: none;
}
.drop {
  height: 50px;
}
.dropDown {
  float: left;
  width: 600px;
  height: 100px;
  background-color: #fff;
  border-radius: 2px;
  display: none;
}
.liStyle {
  width: 100%;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
